<template>
    <div class="wrap">
        <div id="container">
            <!-- 定义一个表格元素 -->
            <!--<button id="redraw">更换数据源</button>-->
            <section class="detail-header">
                <div class="col-sm-12 console-title">
                    <h5 class="">定时器日志</h5>
                    <div class="stayRight ">
                        <el-button @click="scheduleLogList(1)" icon="star-off">刷新</el-button>
                        <el-button ><router-link  :to="'/schedule/index'">定时器管理</router-link></el-button>
                    </div>
                    
                </div>
            </section>
            <section class="searchBar">
                <div class="form-inline">
                    <div class="pull-left">
                        <div class="searchIpt">
                            <el-input v-model="searchStr" placeholder="请输入任务ID或bean名称进行搜索"></el-input>
                        </div>
                        <div class="searchbtn">
                            <el-button @click="scheduleLogList(1,searchStr,10)">搜索</el-button>
                        </div>
                    </div>
                </div>
            </section>
            <section class="tableMain">
                <el-table :data="dataArr" border style="width: 100%">
                    <el-table-column prop="jobId" label="任务ID" > </el-table-column>
                    <el-table-column prop="beanName" label="bean名称" > </el-table-column>
                    <el-table-column prop="methodName" label="方法名称" > </el-table-column>
                    <el-table-column prop="params" label="参数" > </el-table-column>
                    <el-table-column prop="times" label="耗时(毫秒)" > </el-table-column>
                    <el-table-column prop="error" label="失败信息" > </el-table-column>
                    <el-table-column label="状态" > 
                      <template scope="scope">
                        <el-tag :type="scope.row.status === 0 ? 'success' : scope.row.status === 1 ? 'danger' : 'gray'" close-transition>{{scope.row.statusName}}</el-tag>
                      </template>
                    </el-table-column>
                </el-table>
                <div class="pageSIzeblock">
                    <div class="pullright">
                        <el-pagination @size-change="handleSizeChange"  @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pagesz" layout="total, sizes, prev, pager, next, jumper" :total="totalSize">
                        </el-pagination>
                    </div>
                    <div class="pullLeft">
                    </div>
                </div>

            </section>
        </div>
        
    </div>
</template>

<script>
import { queryScheduleLogList } from '@/api/scheduleData.js'
export default {
  data() {
    return {
      dataArr: null,
      dataAddress: [],
      listLoading: true,
      currentPage: 1,
      pagesz: 10,
      totalSize: 0,
      hightsetting: false,
      selected: '',
      searchStr: ''
    }
  },
  created() {
    this.scheduleLogList(1)
  },
  methods: {
    scheduleLogList(curr, searchStr, size) {
      this.listLoading = true
      if (size === undefined) {
        size = 10
      }
      var listQuery = { currPage: curr, searchStr: searchStr, pageSize: size }
      queryScheduleLogList(listQuery).then(response => {
        console.log(response.data)
        this.dataArr = response.data.data
        this.listLoading = false
        this.totalSize = response.data.totalRows
        this.currentPage = curr
        this.pagesz = size
        if (this.dataArr.length) {
          this.dataArr.forEach(function(element) {
            if (element.status === 1) {
              element.statusName = '失败'
            } else if (element.status === 0) {
              element.statusName = '成功'
            }
          }, this)
        }
      })
    },
    sethigh() {
      this.hightsetting = true
    },
    handleSizeChange(val) {
      this.scheduleLogList(1, '', '', val)
    },
    handleCurrentChange(val) {
      this.scheduleLogList(val)
    }
  }
}
</script>

<style lang="scss">
.detail-header{
    padding: 0 15px;
    margin-bottom: 10px;
    overflow: hidden;
    .console-title{
        padding: 16px 0px;
        min-height: 70px;
        border-bottom: 1px solid #eee;
        position: relative;
        h5{
            display: inline-block;
            text-indent: 8px;
            border-left: 2px solid #88B7E0;
            margin: 8px 0;
            margin-right: 8px;
            vertical-align: top;
        }
        .stayRight{
            position: absolute;
            top: 15px;
            right: 0;
            overflow: hidden;
            .refresh{
                float: left;
                margin-right: 10px;
                color: #333;
                border: 1px solid #ddd;
                background-color: #F7F7F7;
            }
            .creatSite{
                float: left;
            }
        }
    }
}
.searchSel{
    width: 150px;
    display: inline-block;
}
.searchIpt{
    width: 350px;
    display: inline-block;
}
.searchbtn{
    width: 100px;
    display: inline-block;
}
.searchBar{
    padding: 0 10px;
}
.tableMain{
    padding: 10px;
}
.typeform{
    display: inline;
    .form-control{
        border: none;
        padding: 0;
        box-shadow:none;
        display: inline;
        height:30px;
        width:60%;
    }
}
.spantype{
    display: inline;
}
.pageSIzeblock{
    overflow: hidden;
    padding: 10px 0;
    .pullright{
        float: right;
    }
}
.statusError{
    color: red;
}
</style>


